<extend name="Extends/base" />
<block name="title">任务赚</block>
<block name="css">
</block>
<block name="body_style"></block>
<block name="body">
    <div class="c-main bgc-fff">

        <div class="swiper-container" style="{:empty($adList)?'padding:20px':''}">
            <div class="swiper-wrapper">
                <volist name="adList" id="vo">
                    <div class="swiper-slide">
                        <div data-href="{$vo.url}" class="rw-ban {$vo['url']?'jump-href':''}">
                            <img src="{$vo.cover}" alt="">
                        </div>
                    </div>
                </volist>
            </div>
        </div>


        <div class="rw-topnav">
            <div class="rw-nav">
                <ul class="rw-nav-list clearfix">
                    <li>
                        <p class="rw-list-txt">人气</p>
                        <p class="rw-list-num">{$joinCount}</p>
                    </li>
                    <li>
                        <p class="rw-list-txt">已发布</p>
                        <p class="rw-list-num">{$taskCount}</p>
                    </li>
                    <li>
                        <p class="rw-list-txt">已完成</p>
                        <p class="rw-list-num">{$finishCount}</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="rw-cont">
            <div class="rw-title clearfix">
                <span data-href="/User/taskList" class="fr jump-href">已做过的任务</span>
                <h3>最新任务</h3>
            </div>
            <ul id="taskList" class="rw-list c-hide"></ul>
            <a href="javascript:;" class="mx-more" style="display: none">点击查看更多</a>
            <div class="no-data">
                <div class="no-dataimg">
                    <img src="__APPS__/images/nodata.png">
                </div>
                <p class="on-datamsg"></p>
            </div>
        </div>
    </div>
</block>
<block name="js">
    <link rel="stylesheet" type="text/css"
        href="__APPS__/widget/swiper4.1.6/swiper-4.1.6.min.css?v={:C('JS_CSS_VERSION')}">
    <script type="text/javascript" src="__APPS__/widget/swiper4.1.6/swiper-4.1.6.min.js?v={:C('JS_CSS_VERSION')}">
    </script>

    <script type="text/javascript" src="__APPS__/js/api.js?v={:C('JS_CSS_VERSION')}"></script>
    <script type="text/javascript">
        var taskType = "{$type}";
        var currPage = 1;

        new Swiper('.swiper-container', {
            autoplay: true,
            slidesPerView: 'auto',
            spaceBetween: 0,
            centeredSlides: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            onSlideChangeStart: function (swiper) {
                console.log(swiper.activeIndex);
            }
        });

        $(function () {
            getTaskList(1);
        });

        $('.c-main').on('click', '.mx-more', function () {
            currPage += 1;
            getTaskList(currPage);
        });

        function getTaskList(page, callback, loading) {
            if (typeof callback != "function") {
                callback = emptyFunc;
            }
            doGetTaskList(taskType, page, function (res) {
                if (res.Code != 10000) {
                    showNoData(res.Message);
                    $('#taskList,.mx-more').hide();
                    callback(res);
                    return false;
                }

                hideNoData();
                var data = res.Result;
                var hasNext = data.hasNext;
                if (hasNext) {
                    $('.mx-more').show();
                } else {
                    $('.mx-more').hide();
                }
                var html = data.html;
                $('#taskList').append(html).show();

                callback(res);
            }, loading);
        }

        /**
         * 显示空数据
         * @param msg
         */
        function showNoData(msg) {
            msg = msg ? msg : "";
            $('.no-data').show().find('.on-datamsg').html(msg);
        }

        /**
         * 隐藏空数据
         */
        function hideNoData() {
            $('.no-data').hide().find('.on-datamsg').html("");
        }
    </script>
</block>